/* export default function(name){ 
    console.log(name) 
} */

const textType = {
  fill:'fillText',
  stroke:'strokeText'
}
export function set (text='',styleObj = {},canvasStyleObj = {} ) {
  const defParams = {
    id: 'waterMark'
  }
  const id = styleObj.id||defParams.id
  const imgUrl = createImg(text,styleObj,canvasStyleObj)
  setBackground(id,imgUrl)
}
// 网页加水印
export function setBackground(id,imgUrl){
  if (document.getElementById(id) !== null) {
    // 局部水印
    let setBackDiv = document.getElementById(id)
    setBackDiv.style.backgroundImage = 'url(' + imgUrl + ')'
    setBackDiv.style.backgroundRepeat = 'repeat'
  }else{
    // 全页水印
    let div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '0px'
    div.style.left = '0px'
    div.style.position = 'fixed'
    div.style.zIndex = '100000'
    div.style.width  = document.documentElement.clientWidth + 'px'
    div.style.height = document.documentElement.clientHeight + 'px'
    div.style.backgroundImage = 'url(' + imgUrl + ')'
    div.style.backgroundRepeat = 'repeat'
    document.body.appendChild(div)
  }
}
// 图片加水印
export function setImgBack(backImg,text='',styleObj = {},canvasStyleObj = {}){
  const backImage = new Image();
  backImage.crossOrigin="anonymous";
  backImage.src = backImg;
  const textImage = new Image()
  textImage.src = createImg(text,styleObj,canvasStyleObj)
  var c= document.createElement('canvas');
	var ctx=c.getContext("2d");
 
  return imgOnload([backImage,textImage]).then(()=>{
    c.width = backImage.width
    c.height = backImage.height 
    ctx.drawImage(backImage,0,0)
    var pat=ctx.createPattern(textImage,'repeat');
    ctx.rect(0,0,c.width,c.height);
    ctx.fillStyle=pat;
    ctx.fill();
    return Promise.resolve(c.toDataURL('image/png'));
  }) 
}
// 生成单张水印图
export function createImg(text='',styleObj = {},canvasStyleObj = {} ){
  // text:string   文本
  // size:string   文字大小
  // angle:Number  角度,-90~90
  const defParams = {
    size:'18',
    angle: -30,
    type:'fill'
  }
  const size = styleObj.size||defParams.size
  const angle = styleObj.angle||defParams.angle
  const type = styleObj.type||defParams.type
  let angleTwo
  if(angle>0){
   angleTwo = 90-angle;
  }else{
   angleTwo = 90+angle;
  }
  // 创建一个画布
  let c = document.createElement('canvas')
  // 设置画布的长宽
  var ctx = c.getContext('2d')
  ctx.font = size + 'px Arial'
  let textObject = ctx.measureText(text)
  // 宽度加size兼容正负90度)
  // 高度加size兼容0度
  c.width = textObject.width * Math.sin( angleTwo * Math.PI/180)+ Math.abs(Number(size)* Math.sin( angle * Math.PI/180))
  c.height = textObject.width * Math.cos( angleTwo * Math.PI/180) + Math.abs(Number(size)* Math.sin( angleTwo * Math.PI/180))
  // 起笔在画布的位置
  if(angle>0){
    ctx.translate(Math.abs(Number(size)* Math.sin( angle * Math.PI/180)), 0)
  }else{
    ctx.translate(0, c.height - Math.abs(Number(size)* Math.sin( angleTwo * Math.PI/180)))
  }
  
  ctx.rotate(angle * Math.PI / 180)
  ctx.fillStyle = 'rgba(130, 142, 162, 0.1)'
  ctx.font = size + 'px Arial'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  if(Object.keys(canvasStyleObj).length>0){
    Object.keys(canvasStyleObj).forEach((key)=>{
      ctx[key] = canvasStyleObj[key]
    })
  }

  if(textType[type]){
    ctx[textType[type]](text, 0, 0)
  }
  // 返回base64图片
  return c.toDataURL('image/png')
}
// 图片加载完成
function imgOnload(imgArr){
  const onloadJudge = (img)=>{
    return new Promise((resolve,reject)=>{
      if(img.complete){
        resolve(true);
      }
      img.onload = ()=>{
        resolve(true);
      }
      img.onerror=()=>{
        reject
      }
    })
  }
  return new Promise(async(resolve,reject)=>{
    for(let i = 0;i<imgArr.length;i++){
     if(await onloadJudge(imgArr[i])!==true){
       reject()
       break
     }
    }
    resolve()
  })
}

export default set

  